﻿@{
    Layout = "~/Views/Shared/_Layout.cshtml";
    ViewBag.Title = "Events Error Donut";
}

<h2>EventsDonut</h2>

<fieldset>
    <legend>Errors Chart</legend>
    <div id="chart" style="min-width: 800px; min-height: 600px;">
    </div>
</fieldset

@section AsideLeft{
    @Html.Partial("StatisticNavigation")
}

@section Foot {
<script src="@Url.Content("~/Scripts/highcharts.js")" type="text/javascript" ></script>
<script type="text/javascript">
var options, chart;
$(document).ready(function () {
    options = {
        chart: {
            renderTo: 'chart',
            type: 'pie'
        },
        title: {
            text: 'Events'
        },
        tooltip: {
            formatter: function () {
                return '<b>' + this.point.name + '</b>' + this.percentage.toPrecision(2) + ' %';
            }
        },
        yAxis: {
         title: {
            text: 'Total percent market share'
         }
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                shadow: false,
                cursor: 'pointer',
                dataLabels: {
                    enabled: true,
                    color: '#000000',
                    connectorColor: '#000000',
                    formatter: function () {
                        return '<b>' + this.point.name + '</b>: ' + this.percentage.toPrecision(2) + ' %';
                    }
                }
            }
        },
        series: [{
         name: 'Logs',
         data: [],
         size: '60%',
         dataLabels: {
            formatter: function() {
               return this.y > 5 ? this.point.name : null;
            },
            color: 'white',
            distance: -30
         }
        }, {
         name: 'Event types',
         data: [],
         innerSize: '60%',
         dataLabels: {
            formatter: function() {
               // display only if larger than 1
               return this.percentage > 1 ? '<b>'+ this.point.name +':</b> '+ this.percentage.toPrecision(2) +'%'  : null;
            }
         }
      }]
    };

    //GO
    $.getJSON('@(Url.Action("EventsDonutData"))', function (data) {
        var errorTypes = data.errorTypes;
        var logs = data.logs;
    }

}
</script>
}